<template>
  <div class="cont cont-add">
    <div class="dia">
      <div class="header">
        <div class="title">请选择标记样式</div>
        <div class="close" @click="emit('close')"></div>
      </div>
      <div class="content">
        <div class="list">
          <div class="one" @click="change(1)">
            <div class="bk">
              <img src="/images/add/point.png" />
            </div>
            <!-- <span class="txt">点</span> -->
          </div>
          <div class="one" @click="change(2)">
            <div class="bk">
              <img src="/images/add/line.png" />
            </div>
            <!-- <span class="txt">线</span> -->
          </div>
          <div class="one" @click="change(3)">
            <div class="bk">
              <img src="/images/add/area.png" />
            </div>
            <!-- <span class="txt">面</span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  oneData: Object,
});
const emit = defineEmits(["close", "change"]);
const state = reactive({
  show: true,
});
const change = (tp) => {
  emit("change", tp);
};
</script>

<style lang="scss" scoped>
.cont {
  width: 380px;
}
.cont-add {
  width: 600px;
  height: 200px;
}
.dia {
  margin-top: 5px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("/images/bbgg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;

    .title {
      margin-left: 40px;
      font-weight: 600;
      font-size: 20px;
      color: #ffffff;
    }

    .close {
      margin: 8px 2px 0 auto;
      width: 30px;
      height: 30px;
      background-image: url("/images/close.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
      opacity: 0.5;
    }
  }

  .content {
    width: 100%;
    height: 220px;
    .list {
      width: 100%;
      height: 100%;
      padding: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      overflow-y: auto;
      background-image: url("/images/mb1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .one {
        width: 95px;
        margin: 3px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }

        .bk {
          width: 180px;
          height: 180px;
          background: linear-gradient(
            90deg,
            rgba(11, 81, 127, 0.5) 0%,
            rgba(11, 81, 127, 0.5) 100%
          );
          box-shadow: inset 0px 0px 16px 0px rgba(0, 61, 99, 0.87);
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>